<template>
    <div class="singer-home">
        <!-- 导航栏 -->
        <van-nav-bar title="歌手信息" left-text="返回" left-arrow @click-left="onClickLeft" />
        <!-- 标签页 -->
        <img :src="singer.singer_pic" alt="">
        <van-tabs v-model="active">
            <van-tab title="百科">
                <SingerIntro :singeid='id' />
            </van-tab>
            <van-tab title="歌曲">
                <SingerSong :singeid='id' />
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import SingerIntro from "./components/SingerIntro.vue";
    import SingerSong from "./components/SingerSong.vue";
    export default {
        data() {
            return {
                // 标签页的当前激活页，是标签页的tab的默认用法
                active: 0,
                // 从HomeSinger.vue中跳转过来，通过路由获取到id，也就是歌手的id
                id: this.$route.params.id,
                singer: {}
            };
        },
        created() {
            //获取到状态管理中对象的数据
            this.singer = this.$store.state.singer
        },
        methods: {
            onClickLeft() {
                window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
            },
        },
        components: { SingerIntro, SingerSong }
    }
</script>

<style scoped>

</style>